<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">

        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">所有</span>
                        <h5>系统用户数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">[[${usersize}]]</h1>
<!--                        <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>-->
<!--                        </div>-->
<!--                        <small>用户</small>-->
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">全年</span>
                        <h5>订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">[[${ordersize}]]</h1>
<!--                        <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>-->
<!--                        </div>-->
<!--                        <small>新订单</small>-->
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">所有</span>
                        <h5>系统宠物数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">[[${petsize}]]</h1>
<!--                        <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>-->
<!--                        </div>-->
<!--                        <small>新访客</small>-->
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">今年</span>
                        <h5>活跃用户</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">[[${ressize}]]</h1>
<!--                        <div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i>-->
<!--                        </div>-->
<!--                        <small>12月</small>-->
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>订单变化柱状图</h5>
                        <div class="pull-right">
                            <!-- You can add any customization options or controls here -->
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <!-- ECharts container -->
                                <div id="echarts-container" style="width: 100%; height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>预约人数变化折线图</h5>
                        <div class="pull-right">
                            <!-- You can add any customization options or controls here -->
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <!-- ECharts container for the second chart -->
                                <div id="echarts-container2" style="width: 100%; height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>

    <th:block th:include="include :: sparkline-js" />
    <script type="text/javascript">
        $(document).ready(function () {
            // Initialize ECharts instance
            var myChart = echarts.init(document.getElementById('echarts-container'));

            // Make AJAX request to backend endpoint
            $.ajax({
                url: '/chart1', // Backend endpoint URL
                type: 'GET',
                success: function (data) {
                    // Extract dates and values from the received data
                    var dates = Object.keys(data.data);
                    var values = Object.values(data.data);

                    // Specify chart configuration and data
                    var option = {
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: dates, // Use dates received from backend as x-axis data
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '订单数',
                                type: 'bar',
                                barWidth: '60%',
                                data: values // Use values received from backend as y-axis data
                            }
                        ]
                    };

                    // Use the specified configuration and data
                    myChart.setOption(option);
                },
                error: function (xhr, status, error) {
                    console.error('Error fetching data:', error);
                }
            });
        });
    </script>
    <script type="text/javascript">
        // Initialize ECharts instance for the second chart
        var myChart2 = echarts.init(document.getElementById('echarts-container2'));

        // Make an AJAX request to fetch data
        $.ajax({
            url: '/chart2', // Replace 'your_backend_endpoint_here' with your actual backend endpoint
            method: 'GET',
            success: function(response) {
                // Process the response data
                var xAxisData = [];
                var seriesData = [];
                $.each(response.data, function(date, value) {
                    xAxisData.push(date);
                    seriesData.push(value);
                });

                // Specify chart configuration and data for the second chart using fetched data
                var option2 = {
                    xAxis: {
                        type: 'category',
                        data: xAxisData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: seriesData,
                        type: 'line'
                    }]
                };

                // Use the specified configuration and data for the second chart
                myChart2.setOption(option2);
            },
            error: function(xhr, status, error) {
                // Handle error
                console.error(error);
            }
        });
    </script>

</body>
</html>
